<template>
  <view class="pending-payment-order">
    <!-- 顶部导航栏（与第一段样式统一） -->
    <view class="nav-bar">
      <image class="back-icon" src="/static/back.png" @click="goBack"></image>
    </view>

    <!-- 蓝色过渡区域（与第一段c1一致） -->
    <view class="c1"></view>

    <!-- 订单信息区域 -->
    <view class="order-info-box">
      <view class="order-info-title">
        <text class="info-title-text">订单信息</text>
        <text class="status-tag">待支付</text>
      </view>
      <view class="order-info-item">
        <text class="label">订单号：</text>
        <text class="value">121212112487878</text>
      </view>
      <view class="order-info-item">
        <text class="label">服务项目：</text>
        <text class="value">车辆保养</text>
      </view>
      <view class="order-info-item">
        <text class="label">服务门店：</text>
        <text class="value">大宝车辆维修店</text>
        <image class="store-icon" src="@/img/车联网服务-08我的-01我的订单-01全部_slices/plane.png"></image>
      </view>
      <view class="order-info-item">
        <text class="label">下单时间：</text>
        <text class="value">2023-03-08 17:40</text>
      </view>
      <view class="order-info-item">
        <text class="label">预约时间：</text>
        <text class="value">2023-03-09 17:40</text>
      </view>
      <view class="order-info-item">
        <text class="label">车辆：</text>
        <text class="value">奔驰FWE4/豫A98FHJ</text>
      </view>
      <view class="order-info-item">
        <text class="label">备注：</text>
        <text class="value"></text>
      </view>
    </view>

    <!-- 订单详情区域 -->
    <view class="order-details-box">
      <view class="order-details-title">
        <text class="details-title-text">订单详情</text>
      </view>
      <view class="details-item">
        <text class="details-label">车辆精洗</text>
        <view class="progress-box">
          <view class="progress-bg">
            <view class="progress-bar" :style="{width: '66%'}"></view>
          </view>
          <text class="progress-text">66%</text>
        </view>
        <text class="details-price">¥39.90</text>
      </view>
      <view class="details-item">
        <text class="details-label">车辆附加费用</text>
        <text class="details-price">0</text>
      </view>
      <view class="details-divider"></view>
      <view class="details-item">
        <text class="details-label">原价</text>
        <text class="details-price">¥59.90</text>
      </view>
      <view class="details-item">
        <text class="details-label">店家优惠</text>
        <text class="details-price discount">-¥20</text>
      </view>
      <view class="details-item">
        <text class="details-label">优惠券</text>
        <text class="details-price discount">-¥10</text>
      </view>
      <view class="details-divider"></view>
      <view class="details-item">
        <text class="details-label">支付金额</text>
        <text class="details-price pay-amount">¥29.9</text>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="contact-service">
        <image class="service-icon" src="@/img/车联网服务-08我的-01我的订单-10详情 - 已退款订单_slices/客服.png"></image>
        <text class="service-text">联系客服</text>
      </view>
      <view class="operate-btns">
        <button class="btn cancel-order-btn">取消订单</button>
        <button class="btn pay-order-btn">立即支付</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 可根据实际需求补充数据或逻辑
    };
  },
  methods: {
    goBack() {
      uni.navigateBack({ delta: 1 });
    }
  }
};
</script>

<style scoped>
  /* 蓝色过渡区域（与第一段完全一致） */
  .c1{
    background-color: #007aff;
    height: 50px;
  }

/* 页面整体样式（与第一段统一） */
.pending-payment-order {
  background-color: #f5f5f5; /* 改为与第一段相同的背景色 */
  min-height: 100vh;
}

/* 导航栏样式（与第一段完全一致） */
.nav-bar {
  display: flex;
  align-items: center;
  height: 0px; /* 与第一段导航栏高度一致 */
  background-color: #007aff; /* 导航栏颜色统一 */
  padding: 0 15px; /* 保留原内边距 */
}
.back-icon {
  width: 20px;
  height: 20px; /* 与第一段图标尺寸一致 */
}
.nav-title {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin: 0 auto;
}

/* 订单信息区域（与第一段列表布局对齐） */
.order-info-box {
  margin: 15px;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-top: -55px; /* 向上覆盖蓝色过渡区，与第一段order-list保持一致 */
}
.order-info-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.info-title-text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.status-tag {
  font-size: 14px;
  color: #f00;
}
.order-info-item {
  display: flex;
  margin-bottom: 10px;
  align-items: center; /* 垂直居中对齐 */
}
.label {
  color: #999;
  width: 70px;
}
.value {
  color: #333;
  flex: 1; /* 自适应剩余空间 */
}
.store-icon {
  width: 16px;
  height: 16px;
  margin-left: 5px;
}

/* 订单详情区域（保持原有结构，优化间距） */
.order-details-box {
  margin: 0 15px 15px 15px;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
}
.order-details-title {
  margin-bottom: 15px;
}
.details-title-text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.details-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.details-label {
  color: #333;
}
.progress-box {
  display: flex;
  align-items: center;
  flex: 1;
  margin: 0 10px;
}
.progress-bg {
  width: 80px;
  height: 10px;
  background-color: #eee;
  border-radius: 5px;
  margin-right: 5px;
}
.progress-bar {
  height: 10px;
  background-color: #007aff;
  border-radius: 5px;
}
.progress-text {
  color: #999;
}
.details-price {
  color: #333;
}
.discount {
  color: #f00;
}
.pay-amount {
  color: #0f0;
  font-weight: bold; /* 突出支付金额 */
}
.details-divider {
  height: 1px;
  background-color: #eee;
  margin: 10px 0;
}

/* 底部操作栏（按钮样式与第一段统一） */
.bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #fff;
  border-top: 1px solid #eee;
}
.contact-service {
  display: flex;
  align-items: center;
}
.service-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.service-text {
  color: #333;
}
.operate-btns {
  display: flex;
}
/* 按钮样式与第一段完全一致 */
.btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  margin-left: 8px;
}
.cancel-order-btn {
  background-color: #eee;
  color: #999;
  border: 1px solid #eee;
  margin-right: auto; /* 靠左排列 */
}
.pay-order-btn {
  background-color: #007aff;
  color: #fff;
  border: 1px solid #007aff;
  margin-left: 8px;
  margin-right: 0; /* 固定最右侧 */
}
</style>